<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
	@charset "utf-8";
/* CSS Document */
*{
    padding:0px;
    border:0px;
    margin:0px;
}
ul {
    list-style:none;
}
.slideBox {
    margin:50px auto;
    width:300px;
    height:480px;
    box-shadow:2px 2px 10px #C38DD4;
    border-radius:20px;
    position:relative;
    overflow:hidden;
}
.slideBox ul {
    position:relative;
    width:2000px;}
.slideBox ul li {
    float:left;
    width:300px;
    height:480px;
    position:relative;
    
}
.spanBox {
    position:absolute;
    width:300px;
    height:20px;
    bottom:10px;
    left:80px;
}
.spanBox span {
    width:18px;
    height:18px;
    margin-left:5px;
    background-color:rgba(201,178,207,1.00);
    float:left;
    line-height:16px;
    text-align:center;
    text-shadow:2px 2px 2px #C5EBF0;
    font-family:cabin-sketch;
    font-size:15px;
}
.slideBox .spanBox .active {
    background-color:rgba(155,83,244,0.79);
    border:solid 1px #BEEBEC;
    border-radius:4px;
}
.prev {
    position:absolute;
    left:0px;
    top:320px;
    float:left;
    border-left:solid 1px rgba(251,245,246,1.00);
    opacity:0.5;
}
.next {
    width:15px;
    height:50px;
    position:absolute;
    right:0px;
    top:320px;
    float:right;
    border-right:solid 1px rgba(245,237,237,1.00);
    opacity:0.5
}
</style>
</head>
<body>
	<div class="slideBox">
    <ul>
    <li><img src="../public/images/1.jpg" alt="" width="300" height="480"/></li>
    <li><img src="../public/images/2.jpg" alt="" width="300" height="480"/></li>
    <li><img src="../public/images/3.jpg" alt="" width="300" height="480"/></li>
    
    </ul>
    <div class="spanBox">
    <span class="active">q</span>
    <span>a</span>
    <span>z</span>
    <span>w</span>
    <span>s</span>
    <span>x</span>
    </div>
    <div class="prev" width="15" height="50" alt="">prev</div>
    <div class="next" width="15" height="50" alt="">next</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
     var slideBox = $(".slideBox");
     var ul = slideBox.find("ul");
     var oneWidth = slideBox.find("ul li").eq(0).width();
     var number = slideBox.find(".spanBox span");            //注意分号 和逗号的用法
     var timer = null;
     var sw = 0;                    
     //每个span绑定click事件，完成切换颜色和动画，以及读取参数值
     number.on("click",function (){
     $(this).addClass("active").siblings("span").removeClass("active");
     sw=$(this).index();
     ul.animate({
            "right":oneWidth*sw,    //ul标签的动画为向左移动；
               });
     });
     //左右按钮的控制效果
     $(".next").stop(true,true).click(function (){
         sw++;
         if(sw==number.length){sw=0};
         number.eq(sw).trigger("click");
         });
    $(".prev").stop(true,true).click(function (){
        sw--;
        if(sw==number.length){sw=0};
        number.eq(sw).trigger("click");
        });
    //定时器的使用，自动开始
    timer = setInterval(function (){
        sw++;
        if(sw==number.length){sw=0};
        number.eq(sw).trigger("click");
        },2000);
    //hover事件完成悬停和，左右图标的动画效果
    slideBox.hover(function(){
        $(".next,.prev").animate({
            "opacity":1,
            },200);
        clearInterval(timer);
        },function(){
            $(".next,.prev").animate({
                "opacity":0.5,
                },500);
        timer = setInterval(function (){
        sw++;
        if(sw==number.length){sw=0};
        number.eq(sw).trigger("click");
        },2000);
            })
    
})
</script>
</body>
</html>